<!doctype html>
<html lang="en">
  <head>
    <%= htmlWebpackPlugin.options.tags.head %>
    <!-- 页面css -->
    <link rel="stylesheet" href="./css/matchDetail/matchDetail.css" />
    <link rel="stylesheet" href="./css/matchDetail/analysis.css" />
    <link rel="stylesheet" href="./css/matchDetail/overview.css" />
    <link rel="stylesheet" href="./css/matchDetail/odds.css" />
    <link rel="stylesheet" href="./css/matchDetail/chatroom.css" />
  </head>

  <body>
    <div class="page">
      <header class="page-header">
        <div class="page-header-nav">
          <div class="header-nav-left">
            <span class="glyphicon glyphicon-menu-left nav-back-btn" onclick="router.back()"></span>
          </div>
          <div class="header-nav-title">
            <span class="flex-1 font-size-big text-align-center">Match</span>
          </div>
        </div>
      </header>
      <!-- 内容主体 -->
      <main class="page-main">
        <div class="flex-column font-size-min text-white match-team-info">
          <div class="text-align-center">European Cup</div>
          <div class="full-width align-center">
            <a class="flex-1 width-0 flex-column align-center" href="/teamDetail.html">
              <img class="match-team-logo" src="./images/ball_park.png" alt="" srcset="" />
              <span class="full-width text-align-center text-ellipsis text-white match-team-name">West Ham United</span>
            </a>
            <div class="flex-column align-center margin-left-10 margin-right-10">
              <span>VS</span>
              <span>20 Sep ,01:00</span>
            </div>
            <a class="flex-1 width-0 flex-column align-center" href="/teamDetail.html">
              <img class="match-team-logo" src="./images/ball_park.png" alt="" srcset="" />
              <span class="full-width text-align-center text-ellipsis text-white match-team-name">Chelsea ChelseaChelseaChelseaChelseaChelseaChelsea</span>
            </a>
          </div>
        </div>

        <!-- 切换tab-nav -->
        <div class="full-height flex-column">
          <div class="tab-nav list-type-tab">
            <div class="active tab-nav-item" data-role="Analysis"><span class="tab-nav-name">Analysis</span></div>
            <div class="tab-nav-item" data-role="Overview"><span class="tab-nav-name">Overview</span></div>
            <div class="tab-nav-item" data-role="Odds"><span class="tab-nav-name">Odds</span></div>
            <div class="tab-nav-item" data-role="Chatroom"><span class="tab-nav-name">Chatroom</span></div>
          </div>

          <div class="flex-1 height-0 margin-left-10 margin-right-10">
            <!-- Analysis -->
            <div id="Analysis" class="full-height">
              <div class="flex-column full-height">
                <div class="overflow-y-auto">
                  <div class="card-white font-size-min">
                    <div class="flex-column">
                      <div class="text-align-center margin-bottom-5">Strength</div>
                      <%= htmlWebpackPlugin.options.tags.progressBar %>
                      <div class="justify-between">
                        <span>W:5 D:4 L:6 Pts:19</span>
                        <span>W:5 D:4 L:6 Pts:19</span>
                      </div>
                    </div>
                    <div class="flex-column">
                      <div class="text-align-center margin-bottom-5">Attack</div>
                      <%= htmlWebpackPlugin.options.tags.progressBar %>
                      <div class="justify-between">
                        <span>Goals Per Match:0.9</span>
                        <span>Goals Per Match:1.1</span>
                      </div>
                    </div>
                    <div class="flex-column">
                      <div class="text-align-center margin-bottom-5">Defend</div>
                      <%= htmlWebpackPlugin.options.tags.progressBar %>
                      <div class="justify-between">
                        <span>Goals against:2</span>
                        <span>Goals against:2</span>
                      </div>
                    </div>
                  </div>
                  <div class="card-white flex-column text-align-center analysis-item margin-top-10">
                    <div class="analysis-title">Points ranking</div>
                    <div class="flex-column margin-bottom-10">
                      <div class="analysis-sub-title padding-10 analysis-team-home">West Ham United</div>
                      <table class="analysis-table">
                        <thead>
                          <tr>
                            <th>Competition</th>
                            <th>Rank</th>
                            <th>P</th>
                            <th>W/D/L</th>
                            <th>GS/GA</th>
                            <th>Pst</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td class="table-cell-w25">Chinese Super League</td>
                            <td>27</td>
                            <td>2</td>
                            <td>0/1/1</td>
                            <td>0/3</td>
                            <td>1</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                    <div class="flex-column">
                      <div class="analysis-sub-title padding-10 analysis-team-vs">Chelsea</div>
                      <table class="analysis-table">
                        <thead>
                          <tr>
                            <th>Competition</th>
                            <th>Rank</th>
                            <th>P</th>
                            <th>W/D/L</th>
                            <th>GS/GA</th>
                            <th>Pst</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td class="table-cell-w25">Chinese Super League</td>
                            <td>27</td>
                            <td>2</td>
                            <td>0/1/1</td>
                            <td>0/3</td>
                            <td>1</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="card-white flex-column text-align-center analysis-item margin-top-10">
                    <div class="analysis-title">Historical Clash</div>
                    <div class="flex-column margin-bottom-10">
                      <div class="flex-column bg-primary padding-10">
                        <div class="justify-between">
                          <div class="flex-1 width-0 margin-right-25 btn-group action-sheet">
                            <div class="dropdown-toggle flex tag-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                              <span class="full-width text-ellipsis margin-right-5">Last 10 games</span>
                              <span class="glyphicon glyphicon-menu-down"></span>
                            </div>
                            <ul class="dropdown-menu">
                              <li class="active"><a href="#">Last 10 games</a></li>
                              <li><a href="#">Another action</a></li>
                              <li><a href="#">Something else here</a></li>
                              <li><a href="#">Separated link</a></li>
                            </ul>
                          </div>

                          <div class="flex flex-gap-10 margin-bottom-10">
                            <span class="tag-white active">All</span>
                            <span class="tag-white">Home</span>
                            <span class="tag-white">Away</span>
                          </div>
                        </div>
                        <div class="text-color-primary font-size-min line-height-1">Last 3 games，West Ham United W:5 D:4 L:6 WP:82%</div>
                      </div>
                      <table class="analysis-table">
                        <thead>
                          <tr>
                            <th>Competition</th>
                            <th>Home</th>
                            <th>Result</th>
                            <th>Away</th>
                            <th>Handicap</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td class="table-cell-w25">
                              <div class="flex-column">
                                <span>08-05 2024</span>
                                <span>Chinese Super League</span>
                              </div>
                            </td>
                            <td class="table-cell-w25">West Ham United</td>
                            <td>3:2</td>
                            <td class="table-cell-w25">Chelsea</td>
                            <td>-0.25</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div class="card-white flex-column text-align-center analysis-item margin-top-10">
                    <div class="analysis-title">Recent achievements</div>
                    <div class="flex-column margin-bottom-10">
                      <div class="analysis-sub-title padding-5 analysis-team-home">West Ham United</div>
                      <div class="flex-column margin-bottom-10">
                        <div class="flex-column analysis-team-home-bg">
                          <div class="justify-between margin-left-10 margin-right-10 margin-bottom-10">
                            <div class="flex-1 width-0 margin-right-25 btn-group action-sheet">
                              <div class="dropdown-toggle flex tag-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="full-width text-ellipsis margin-right-5">Last 10 games</span>
                                <span class="glyphicon glyphicon-menu-down"></span>
                              </div>
                              <ul class="dropdown-menu">
                                <li class="active"><a href="#">Last 10 games</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li><a href="#">Separated link</a></li>
                              </ul>
                            </div>

                            <div class="flex flex-gap-10">
                              <span class="tag-white active">All</span>
                              <span class="tag-white">Home</span>
                              <span class="tag-white">Away</span>
                            </div>
                          </div>
                        </div>
                        <table class="analysis-table">
                          <thead>
                            <tr>
                              <th>Competition</th>
                              <th>Home</th>
                              <th>Result</th>
                              <th>Away</th>
                              <th>Handicap</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td class="table-cell-w25">
                                <div class="flex-column">
                                  <span>08-05 2024</span>
                                  <span>Chinese Super League</span>
                                </div>
                              </td>
                              <td class="table-cell-w25">West Ham United</td>
                              <td>3:2</td>
                              <td class="table-cell-w25">Chelsea</td>
                              <td>-0.25</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                    <div class="flex-column">
                      <div class="analysis-sub-title padding-5 analysis-team-vs">West Ham United</div>
                      <div class="flex-column margin-bottom-10">
                        <div class="flex-column analysis-team-vs-bg">
                          <div class="justify-between margin-left-10 margin-right-10 margin-bottom-10">
                            <div class="flex-1 width-0 margin-right-25 btn-group action-sheet">
                              <div class="dropdown-toggle flex tag-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="full-width text-ellipsis margin-right-5">Last 10 games</span>
                                <span class="glyphicon glyphicon-menu-down"></span>
                              </div>
                              <ul class="dropdown-menu">
                                <li class="active"><a href="#">Last 10 games</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li><a href="#">Separated link</a></li>
                              </ul>
                            </div>

                            <div class="flex flex-gap-10">
                              <span class="tag-white active">All</span>
                              <span class="tag-white">Home</span>
                              <span class="tag-white">Away</span>
                            </div>
                          </div>
                        </div>
                        <table class="analysis-table">
                          <thead>
                            <tr>
                              <th>Competition</th>
                              <th>Home</th>
                              <th>Result</th>
                              <th>Away</th>
                              <th>Handicap</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td class="table-cell-w25">
                                <div class="flex-column">
                                  <span>08-05 2024</span>
                                  <span>Chinese Super League</span>
                                </div>
                              </td>
                              <td class="table-cell-w25">West Ham United</td>
                              <td>3:2</td>
                              <td class="table-cell-w25">Chelsea</td>
                              <td>-0.25</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                  <div class="card-white flex-column text-align-center analysis-item margin-top-10 margin-bottom-10">
                    <div class="analysis-title">Future Events</div>
                    <div class="flex-column margin-bottom-10">
                      <div class="analysis-sub-title padding-5 analysis-team-home">West Ham United</div>
                      <div class="flex-column margin-bottom-10">
                        <div class="flex-column analysis-team-home-bg">
                          <div class="justify-between margin-left-10 margin-right-10 margin-bottom-10">
                            <div class="flex-1 width-0 margin-right-25 btn-group action-sheet">
                              <div class="dropdown-toggle flex tag-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="full-width text-ellipsis margin-right-5">Last 10 games</span>
                                <span class="glyphicon glyphicon-menu-down"></span>
                              </div>
                              <ul class="dropdown-menu">
                                <li class="active"><a href="#">Last 10 games</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li><a href="#">Separated link</a></li>
                              </ul>
                            </div>

                            <div class="flex flex-gap-10">
                              <span class="tag-white active">All</span>
                              <span class="tag-white">Home</span>
                              <span class="tag-white">Away</span>
                            </div>
                          </div>
                        </div>
                        <table class="analysis-table">
                          <thead>
                            <tr>
                              <th>Competition</th>
                              <th>Home</th>
                              <th>Result</th>
                              <th>Away</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td class="table-cell-w25">
                                <div class="flex-column">
                                  <span>08-05 2024</span>
                                  <span>Chinese Super League</span>
                                </div>
                              </td>
                              <td class="table-cell-w28">West Ham United</td>
                              <td>3:2</td>
                              <td class="table-cell-w28">Chelsea</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                    <div class="flex-column">
                      <div class="analysis-sub-title padding-5 analysis-team-vs">West Ham United</div>
                      <div class="flex-column margin-bottom-10">
                        <div class="flex-column analysis-team-vs-bg">
                          <div class="justify-between margin-left-10 margin-right-10 margin-bottom-10">
                            <div class="flex-1 width-0 margin-right-25 btn-group action-sheet">
                              <div class="dropdown-toggle flex tag-white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="full-width text-ellipsis margin-right-5">Last 10 games</span>
                                <span class="glyphicon glyphicon-menu-down"></span>
                              </div>
                              <ul class="dropdown-menu">
                                <li class="active"><a href="#">Last 10 games</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li><a href="#">Separated link</a></li>
                              </ul>
                            </div>

                            <div class="flex flex-gap-10">
                              <span class="tag-white active">All</span>
                              <span class="tag-white">Home</span>
                              <span class="tag-white">Away</span>
                            </div>
                          </div>
                        </div>
                        <table class="analysis-table">
                          <thead>
                            <tr>
                              <th>Competition</th>
                              <th>Home</th>
                              <th>Result</th>
                              <th>Away</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr>
                              <td class="table-cell-w25">
                                <div class="flex-column">
                                  <span>08-05 2024</span>
                                  <span>Chinese Super League</span>
                                </div>
                              </td>
                              <td class="table-cell-w25">West Ham United</td>
                              <td>3:2</td>
                              <td class="table-cell-w25">Chelsea</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Overview -->
            <div id="Overview" class="full-height hide-none">
              <div class="flex-column full-height">
                <div class="overflow-y-auto">
                  <div class="card-white font-size-min">
                    <div class="justify-center align-center margin-top-5 margin-bottom-10">
                      <img class="width-height-25 img-contain" src="./images/ball_park.png" alt="" srcset="" />
                      <div class="margin-left-20 margin-right-20 font-weight-bold">VS</div>
                      <img class="width-height-25 img-contain" src="./images/ball_park.png" alt="" srcset="" />
                    </div>
                    <div class="flex-column flex-gap-15 margin-bottom-15">
                      <div class="flex flex-gap-15">
                        <div class="flex-1 flex-column">
                          <div class="flex margin-bottom-5">
                            <span>20</span>
                            <span class="flex-1 text-align-center">shoot on target</span>
                            <span>80</span>
                          </div>
                          <%= htmlWebpackPlugin.options.tags.progressBar %>
                        </div>
                        <div class="flex-1 flex-column">
                          <div class="flex margin-bottom-5">
                            <span>20</span>
                            <span class="flex-1 text-align-center">shoot on target</span>
                            <span>80</span>
                          </div>
                          <%= htmlWebpackPlugin.options.tags.progressBar %>
                        </div>
                      </div>
                      <div class="flex flex-gap-15">
                        <div class="flex-1 flex-column">
                          <div class="flex margin-bottom-5">
                            <span>20</span>
                            <span class="flex-1 text-align-center">shoot on target</span>
                            <span>80</span>
                          </div>
                          <%= htmlWebpackPlugin.options.tags.progressBar %>
                        </div>
                        <div class="flex-1 flex-column">
                          <div class="flex margin-bottom-5">
                            <span>20</span>
                            <span class="flex-1 text-align-center">shoot on target</span>
                            <span>80</span>
                          </div>
                          <%= htmlWebpackPlugin.options.tags.progressBar %>
                        </div>
                      </div>
                      <div class="flex flex-gap-15">
                        <div class="flex-1 flex-column">
                          <div class="flex margin-bottom-5">
                            <span>20</span>
                            <span class="flex-1 text-align-center">shoot on target</span>
                            <span>80</span>
                          </div>
                          <%= htmlWebpackPlugin.options.tags.progressBar %>
                        </div>
                        <div class="flex-1 flex-column">
                          <div class="flex margin-bottom-5">
                            <span>20</span>
                            <span class="flex-1 text-align-center">shoot on target</span>
                            <span>80</span>
                          </div>
                          <%= htmlWebpackPlugin.options.tags.progressBar %>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="card-white margin-top-10 margin-bottom-10">
                    <div class="tab-nav overview-tab-nav">
                      <div class="active tab-nav-item" data-role="live"><span class="tab-nav-name">Text live stream</span></div>
                      <div class="tab-nav-item" data-role="events"><span class="tab-nav-name">Important events</span></div>
                    </div>

                    <div id="live" class="">
                      <div class="flex-column record-word-list">
                        <div class="flex record-word-item">
                          <div class="flex-column record-word-label">
                            <div class="align-center record-word-time">
                              <img class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_door.png" alt="" />
                            </div>
                          </div>
                          <div class="flex-1 record-word-info tag-dot-home">
                            <div class="padding-10 radius-big record-word-text record-word-bg">
                              <span class="margin-right-5">90+3′</span>
                              Chelsea receives a corner kick
                              <span class="white-space-nowrap record-word-team">
                                <img
                                  class="display-inline-block record-word-team-logo"
                                  src="https://tiyu-datasoure.oss-cn-guangzhou.aliyuncs.com/upload/20231113/0835001fe6e79a9204141321757db435.png"
                                />
                              </span>
                            </div>
                          </div>
                        </div>
                        <div class="flex record-word-item">
                          <div class="flex-column record-word-label">
                            <div class="align-center record-word-time">
                              <img class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_partial.png" alt="" />
                            </div>
                          </div>
                          <div class="flex-1 record-word-info tag-dot-vs">
                            <div class="padding-10 radius-big record-word-text record-word-bg">
                              <span class="margin-right-5">90+3′</span>
                              Chelsea receives a corner kick
                              <span class="white-space-nowrap record-word-team">
                                <img
                                  class="display-inline-block record-word-team-logo"
                                  src="https://tiyu-datasoure.oss-cn-guangzhou.aliyuncs.com/upload/20231102/e3c1ed53070c2c45319ce60882256327.jpg"
                                />
                              </span>
                            </div>
                          </div>
                        </div>
                        <div class="flex record-word-item">
                          <div class="flex-column record-word-label">
                            <div class="align-center record-word-time">
                              <img class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_partial.png" alt="" />
                            </div>
                          </div>
                          <div class="flex-1 record-word-info tag-dot-vs">
                            <div class="padding-10 radius-big record-word-text record-word-bg">
                              <span class="margin-right-5">90+3′</span>
                              Chelsea receives a corner kick
                              <span class="white-space-nowrap record-word-team">
                                <img
                                  class="display-inline-block record-word-team-logo"
                                  src="https://tiyu-datasoure.oss-cn-guangzhou.aliyuncs.com/upload/20231102/e3c1ed53070c2c45319ce60882256327.jpg"
                                />
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div id="events" class="record-event hide-none">
                      <div class="align-center justify-center margin-top-20 record-list">
                        <div class="flex-column align-center record">
                          <div class="record-item">
                            <div class="flex flex-wrap logo"></div>
                            <div class="align-center time-block"><div class="time">0′</div></div>
                            <div class="flex flex-wrap logo"></div>
                          </div>
                          <div class="record-item">
                            <div class="flex flex-wrap logo"></div>
                            <div class="align-center time-block"><div class="time">15′</div></div>
                            <div class="flex flex-wrap logo"></div>
                          </div>
                          <div class="record-item">
                            <div class="flex flex-wrap logo"></div>
                            <div class="align-center time-block"><div class="time">30′</div></div>
                            <div class="flex flex-wrap logo"></div>
                          </div>
                          <div class="record-item">
                            <div class="flex flex-wrap logo"></div>
                            <div class="align-center time-block"><div class="time">45′</div></div>
                            <div class="flex flex-wrap logo"></div>
                          </div>
                          <div class="record-item">
                            <div class="flex flex-wrap logo"></div>
                            <div class="align-center time-block"><div class="time">60′</div></div>
                            <div class="flex flex-wrap logo"></div>
                          </div>
                          <div class="record-item">
                            <div class="flex flex-wrap logo">
                              <img class="rule-logo-icon" src="./images/matchDetail/infoIcon/replace.png" title="75′：顿涅茨克矿工换人" />
                            </div>
                            <div class="align-center time-block"><div class="time">75′</div></div>
                            <div class="flex flex-wrap logo">
                              <img class="rule-logo-icon" src="./images/matchDetail/infoIcon/card_yellow.png" title="78′：亚特兰大球员得到一张黄牌" />
                              <img class="rule-logo-icon" src="./images/matchDetail/infoIcon/replace.png" title="83′：亚特兰大换人，本·戈弗雷上场，换下奥迪隆·科索努" />
                            </div>
                          </div>
                          <div class="record-item">
                            <div class="align-center time-block"><div class="time">90′</div></div>
                          </div>
                        </div>
                      </div>
                    </div>

                    <div class="flex flex-wrap margin-top-20 rule-logo">
                      <div class="align-center rule-logo-item">
                        <img alt="Corner kick" class="rule-logo-icon" src="./images/matchDetail/infoIcon/corner_ball.png" />
                        <span class="rule-logo-name">Corner kick</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Goal" class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_goal.png" />
                        <span class="rule-logo-name">Goal</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Penalty kick" class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_point.png" />
                        <span class="rule-logo-name">Penalty kick</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Penalty not scored" class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_miss.png" />
                        <span class="rule-logo-name">Penalty not scored</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Own goal" class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_luck.png" />
                        <span class="rule-logo-name">Own goal</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Shot off target" class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_partial.png" />
                        <span class="rule-logo-name">Shot off target</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Shot on Target" class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_front.png" />
                        <span class="rule-logo-name">Shot on Target</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Yellow card" class="rule-logo-icon" src="./images/matchDetail/infoIcon/card_yellow.png" />
                        <span class="rule-logo-name">Yellow card</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Red card" class="rule-logo-icon" src="./images/matchDetail/infoIcon/card_red.png" />
                        <span class="rule-logo-name">Red card</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Offside" class="rule-logo-icon" src="./images/matchDetail/infoIcon/offside.png" />
                        <span class="rule-logo-name">Offside</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Assisting" class="rule-logo-icon" src="./images/matchDetail/infoIcon/assists.png" />
                        <span class="rule-logo-name">Assisting</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Substitution" class="rule-logo-icon" src="./images/matchDetail/infoIcon/replace.png" />
                        <span class="rule-logo-name">Substitution</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Goal kick" class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_door.png" />
                        <span class="rule-logo-name">Goal kick</span>
                      </div>
                      <div class="align-center rule-logo-item">
                        <img alt="Free kick" class="rule-logo-icon" src="./images/matchDetail/infoIcon/ball_free.png" />
                        <span class="rule-logo-name">Free kick</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Odds -->
            <div id="Odds" class="full-height hide-none">
              <div class="flex-column full-height">
                <div class="overflow-y-auto">
                  <div class="card-white">
                    <div class="tab-nav odds-tab-nav">
                      <div class="active tab-nav-item" data-role="Europeanodds"><span class="tab-nav-name">Europeanodds</span></div>
                      <div class="tab-nav-item" data-role="Asian"><span class="tab-nav-name">Asian Handicap</span></div>
                      <div class="tab-nav-item" data-role="OverUnder"><span class="tab-nav-name">Over/Under</span></div>
                    </div>

                    <div id="Europeanodds" class="flex-column">
                      <div class="font-size-min">
                        <div class="flex margin-top-10"><div class="flex-1 text-align-center text-color-regular">Trends in Europeanodds for various companies</div></div>
                        <div class="flex margin-top-20">
                          <div class="flex-1 margin-right-30 text-align-right">Raise</div>
                          <div class="flex-1 margin-left-30 text-align-left">Down</div>
                        </div>
                        <div class="flex-column game-odds-trend">
                          <div class="justify-center margin-top-10 odds-trend-item">
                            <div class="flex-1 flex-column trend-item">
                              <%= htmlWebpackPlugin.options.tags.progressBar %>
                              <div class="font-size-min justify-between margin-top-5 progress-content">
                                <span>24</span>
                                <span>100%</span>
                              </div>
                            </div>
                            <div class="font-size-normal line-height-1 margin-left-10 margin-right-10">W</div>
                            <div class="flex-1 flex-column trend-item">
                              <%= htmlWebpackPlugin.options.tags.progressBar %>
                              <div class="font-size-min justify-between margin-top-5 progress-content">
                                <span>0%</span>
                                <span>0</span>
                              </div>
                            </div>
                          </div>
                          <div class="justify-center margin-top-10 odds-trend-item">
                            <div class="flex-1 flex-column trend-item">
                              <%= htmlWebpackPlugin.options.tags.progressBar %>
                              <div class="font-size-min justify-between margin-top-5 progress-content">
                                <span>23</span>
                                <span>96%</span>
                              </div>
                            </div>
                            <div class="font-size-normal line-height-1 margin-left-10 margin-right-10" style="color: rgb(32, 183, 17)">D</div>
                            <div class="flex-1 flex-column trend-item">
                              <%= htmlWebpackPlugin.options.tags.progressBar %>
                              <div class="font-size-min justify-between margin-top-5 progress-content">
                                <span>0%</span>
                                <span>0</span>
                              </div>
                            </div>
                          </div>
                          <div class="justify-center margin-top-10 odds-trend-item">
                            <div class="flex-1 flex-column trend-item">
                              <%= htmlWebpackPlugin.options.tags.progressBar %>
                              <div class="font-size-min justify-between margin-top-5 progress-content">
                                <span>0</span>
                                <span>0%</span>
                              </div>
                            </div>
                            <div class="font-size-normal line-height-1 margin-left-10 margin-right-10">L</div>
                            <div class="flex-1 flex-column trend-item">
                              <%= htmlWebpackPlugin.options.tags.progressBar %>
                              <div class="font-size-min justify-between margin-top-5 progress-content">
                                <span>23%</span>
                                <span>96</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div class="margin-top-25"><%= htmlWebpackPlugin.options.tags.oddsTable %></div>
                    </div>

                    <div id="Asian" class="flex-column"><%= htmlWebpackPlugin.options.tags.oddsTable %></div>
                    <div id="OverUnder" class="flex-column"><%= htmlWebpackPlugin.options.tags.oddsTable %></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Chatroom -->
            <div id="Chatroom" class="full-height hide-none">
              <div class="flex-column full-height">
                <div class="flex-1 height-0">
                  <div class="overflow-y-auto">
                    <div class="card-white">
                      <div class="flex-column flex-gap-10">
                        <div class="flex">
                          <img class="width-height-25 margin-right-10" src="./images/./logo.ico" alt="用户头像" srcset="" />
                          <div class="text-align-left">
                            <span class="text-blue">Oqiu：</span>
                            hey guys.The match will start in one day. Here is the best for you to join the match！Make some noise here！
                          </div>
                        </div>
                        <div class="flex">
                          <img class="width-height-25 margin-right-10" src="./images/./logo.ico" alt="用户头像" srcset="" />
                          <div class="text-align-left">
                            <span class="text-blue">Oqiu：</span>
                            hey guys.The match will start in one day. Here is the best for you to join the match！Make some noise here！
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="chatroom-footer">
                  <div class="chatroom-input-box">
                    <a class="chatroom-input">The chatroom is already closed</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <%= htmlWebpackPlugin.options.tags.foot %>
  </body>
</html>
